<template>
  <div class='chartbar'>
      <div id='spam_chart' style='width:100%;height:100%;'></div>
    </div>
</template>

<script>
export default {
  props: {
    classType: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      legendData: ['健康', '合格', '亚健康', '不健康', '沉默'],
      xData: {
        time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        type: ['深矿业', '电力、燃气及水的供应业', '房地产业', 
        '国际组织', '建筑业', '教育', '金融业', '居民服务和其他服务业', '批发和零售业', '制造业', '住宿和餐饮业', '租赁和商务服务业']
      }
    }
  },
  mounted() {
    this.spamChart()
  },
  methods: {
    spamChart() {
      let myChart = this.$echarts.init(document.getElementById('spam_chart'))
      let option = {
        backgroundColor: '#FFFFFF',
        title: {
          text: '企业类别健康度分析',
          textStyle: {
            color: '#3e8698',
            fontFamily: 'monospace'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}
          }
        },
        legend: {
          data: this.legendData
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              interval: 0
            },
            axisLabel: {
              interval: 0,
              rotate: this.classType === '1' ? '' : '-15'
            },
            data: this.classType === '1' ? this.xData.time : this.xData.type
          }
        ],
        yAxis: [
          {
            type: 'value',
            //name: '投诉举报数',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '健康',
            type: 'bar',
            itemStyle: {
              normal: { color: '#01949B' }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              // data: [{ type: 'average', name: '平均值' }]
            },
            data: [
              2031,
              1793,
              3640,
              2593,
              4377,
              3201,
              2275,
              3289,
              3356,
              2859,
              4244,
              3945
            ]
          },
          {
            name: '合格',
            type: 'bar',
            itemStyle: {
              normal: { color: '#b3a4da' }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              // data: [{ type: 'average', name: '平均值' }]
            },
            data: [
              1043,
              1456,
              1900,
              1200,
              2100,
              1870,
              980,
              1569,
              1130,
              1490,
              2300,
              2210
            ]
          },
          {
            name: '亚健康',
            type: 'bar',
            itemStyle: {
              normal: { color: '#3785ca' }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              // data: [{ type: 'average', name: '平均值' }]
            },
            data: [787, 571, 999, 341, 231, 812, 735, 231, 322, 712, 1230, 870]
          },
          {
            name: '不健康',
            type: 'bar',
            itemStyle: {
              normal: { color: '#EBA954' }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              // data: [{ type: 'average', name: '平均值' }]
            },
            data: [980, 798, 1100, 400, 320, 987, 767, 345, 457, 789, 1100, 556]
          },
          {
            name: '沉默',
            type: 'bar',
            itemStyle: {
              normal: { color: '#C23531' }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              // data: [{ type: 'average', name: '平均值' }]
            },
            data: [458, 345, 234, 598, 678, 1000, 567, 323, 234, 645, 123, 890]
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chartbar {
  width: 100%;
  height: 33%;
  background: cornsilk;
}
</style>